<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="static/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="static/jquery/gantt/css/style.css" />
<link rel="stylesheet" href="static/jquery/gantt/css/prettify.css" />
<script src="static/jquery/jquery-1.12.4.js"></script>
<script src="static/bootstrap/js/bootstrap.js"></script>
<script src="static/jquery/gantt/js/jquery.fn.gantt.js"></script>

<script src="static/js/base-loading.js"></script>
<title>项目进展</title>

</head>
<body>
	<div class="gantt"></div>

	</div>
	<div class="modal fade" id="proDlg" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<table class="table table-bordered" style="margin-top: 10px;">
						<tbody id="info">
						</tbody>
					</table>
				</div>

			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>

<script th:inline="javascript">

var projectitemid = [[${projectitemid}]];
$.ajax({
	type : 'GET',
	url :"getschedule.do?projectitemid="+projectitemid,
	contentType : "application/json",
	success : function(data) {
		
		$(".gantt").gantt({
			source:data,
			//source:[{ name: "主计划1",desc: "计划日期",values: [{id: "t01",from: "/Date(2018/09/15)/",to: "/Date(2018/09/15)/",label: "计划",customClass: "ganttRed"}]},{ame: "主计划1",desc: "计划日期",values: [{id: "t01",from: "/Date(2018/09/15)/",to: "/Date(2018/09/15)/",label: "计划",customClass: "ganttRed"}]}],
			navigate: "scroll",
			itemsPerPage: 10,
			onItemClick: function(data) {
				var obj = $.parseJSON(data);
				if(obj.projectitemid){//计划
					var html="";
					html+='<tr><td width=30%>计划内容</td>';
					html+='<td width=70%>'+obj.content+'</td></tr>';
					html+='<tr><td width=30%>百分比</td>';
					html+='<td width=70%>'+obj.percent+'%</td></tr>';
					html+='<tr><td width=30%>完成百分比</td>';
					html+='<td width=70%>'+obj.finishpercent+'%</td></tr>';
					$("#info").empty().append(html);
					$("#proDlg").modal('show');
				}
				if(obj.mainid){
					html+='<tr><td width=30%>日计划内容</td>';
					html+='<td width=70%>'+obj.content+'</td></tr>';
					html+='<tr><td width=30%>主计划百分比</td>';
					html+='<td width=70%>'+obj.percent+'%</td></tr>';
					if(obj.report){
						html+='<tr><td width=30%>工作汇报</td>';
						html+='<td width=70%>'+obj.report.content+'</td></tr>';
						html+='<tr><td width=30%>主计划完成百分比</td>';
						html+='<td width=70%>'+obj.report.percent*obj.percent/100+'%</td></tr>';
					}
					$("#info").empty().append(html);
					$("#proDlg").modal('show');
				}
			},
			onAddClick: function(dt, rowId) {
			},
			onRender: function() {
			},
			onDataLoadFailed: function(data) {
			}
		});
	}
});
	


</script>
<style type="text/css">
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	padding: 0 0 50px 0;
}

.contain {
	width: 1000px;
	margin: 0 auto;
}

h1 {
	margin: 40px 0 20px 0;
}

h2 {
	font-size: 1.5em;
	padding-bottom: 3px;
	border-bottom: 1px solid #DDD;
	margin-top: 50px;
	margin-bottom: 25px;
}

table th:first-child {
	width: 150px;
}
/* Bootstrap 3.x re-reset */
.fn-gantt *, .fn-gantt *:after, .fn-gantt *:before {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.modal-backdrop {
	z-index: 0;
}
</style>
</html>